<template>
  <div class="order-detail">
    <!-- 顶部Nav区域  -->
    <nav-bar ref="navBar">
      <template v-slot:center>
        <span style="font-size: 0.16rem; color: #fff">订单详情</span>
      </template>
    </nav-bar>
    <Scroll class="my-scroll" ref="myScroll" :probeType="3" @scroll="scroll">
      <!-- 订单状态 -->
      <div class="order-status">
        <div class="order-box"><span class="order-text">订单状态: </span>{{ orderStatus[orderDetail.status - 1] }}</div>
        <div class="order-box"><span class="order-text">订单编号: </span>{{ orderDetail.order_no }}</div>
        <div class="order-box"><span class="order-text">下单时间: </span>{{ orderDetail.created_at }}</div>
        <van-button
          type="primary"
          block
          style="margin: 0.2rem 0"
          color="#1BAFAD"
          v-if="orderDetail.status === 1"
          @click="showPay"
          >去支付</van-button
        >
        <van-button block color="gary" plain v-if="orderDetail.status === 2" @click="handleConfirmOrder"
          >确认订单</van-button
        >
      </div>
      <!-- 订单金额 -->
      <div class="goods-info">
        <div class="order-box">
          <span class="order-text">商品金额: </span>￥{{ $store.state.order.totalPrice + '.00' }}
        </div>
        <div class="order-box"><span class="order-text">配送方式: </span>普通快递</div>
      </div>
      <!-- 购买的商品 -->
      <div v-if="orderDetail.orderDetails">
        <van-card
          v-for="item in orderDetail.orderDetails.data"
          :key="item.id"
          :num="item.num"
          tag="标签"
          :price="item.price + '.00'"
          :desc="item.goods.description"
          :title="item.goods.title"
          :thumb="item.goods.cover_url"
        />
      </div>
      <!-- 商品列表 -->
      <goods-list :goodslist="goodslist" />
    </Scroll>
    <!-- 底部弹出层 -->
    <van-action-sheet v-model:show="payIsShow" title="支付订单" @close="payClose">
      <van-grid :border="false" :column-num="2">
        <van-grid-item>
          <p>支付宝二维码</p>
          <van-image :src="aliyun" width="150" height="150" />
        </van-grid-item>
        <van-grid-item>
          <p>微信二维码</p>
          <van-image :src="wechat" width="150" height="150" />
        </van-grid-item>
      </van-grid>
    </van-action-sheet>
    <!-- 全剧组件BackTop -->
    <back-top @backTop="backTop" v-show="isBackTopShow" />
  </div>
</template>

<script>
import UseTabBar from 'hooks/tabbar/UseTabBar'
import { getorderDetail, payOrder, payOrderStatus, orderConfirm } from 'network/order'
import { useRoute } from 'vue-router'
import { Toast, Dialog } from 'vant'
import UseHomeTypeData from 'hooks/home/UseHomeTypeData'
import useScroll from 'hooks/scroll/useScroll'
import GoodsList from 'components/content/goods/GoodsList.vue'
import Scroll from 'components/common/scroll/Scroll.vue'
import { toRefs, ref, onMounted, reactive } from 'vue'
export default {
  components: { GoodsList, Scroll },
  name: 'OrderDeatil',
  setup(props) {
    UseTabBar()
    // 订单状态
    const orderStatus = reactive(['下单', '支付', '发货', '收货', '过期'])
    // 生成当前的路由实例
    const route = useRoute()
    // 获取商品列表数据
    const homeTypeData = UseHomeTypeData()
    // 拿到scroll的组件实例
    const myScroll = ref(null)
    useScroll(myScroll)
    // backtop的显示与隐藏
    const isBackTopShow = ref(false)
    // 订单Id
    let orderNum = ref('')
    // 订单数据
    let orderDetail = ref({})
    // 底部弹出层
    let payIsShow = ref(false)
    // 阿里云二维码
    let aliyun = ref('')
    // 微信二维码
    let wechat = ref('')
    // 定时器
    let timer = null
    // 回到顶部的方法
    function backTop() {
      // 调用Bs的滚动到某个位置方法
      myScroll.value.scrollTo(0, 0, 1000)
    }
    function scroll({ y }) {
      // 判断是否显示分类控制栏
      isBackTopShow.value = -y > 300 ? true : false
    }
    const init = () => {
      const { id } = route.query
      orderNum.value = id
      getorderDetail(id).then(res => {
        orderDetail.value = res
      })
    }

    // 初始化执行的事件
    onMounted(() => {
      Toast.loading({ message: '加载中...', forbidClick: true })
      init()
      Toast.clear()
    })
    // 支付弹出框

    function showPay() {
      payIsShow.value = true
      payOrder(orderNum.value, { type: 'aliyun' }).then(res => {
        aliyun.value = 'https://api.shop.eduwork.cn' + res.qr_code_url
        wechat.value = 'https://api.shop.eduwork.cn' + res.qr_code_url
      })
      // payOrder(orderNum.value, { type: 'wechat' }).then(res => {
      //   wechat.value = res.qr_code_url
      // })
      // 轮询查看
      if (timer) clearInterval(timer)
      timer = setInterval(() => {
        payOrderStatus(orderNum.value).then(res => {
          if (res == '2') {
            clearInterval(timer)
            router.go(0)
          }
        })
      }, 2000)
    }
    // 确认订单
    function handleConfirmOrder() {
      Dialog.confirm({
        title: '通知',
        message: '是否确认订单?'
      })
        .then(() => {
          // on confirm
          orderConfirm(orderNum.value).then(res => {
            console.log(res)
            Toast('确认收货成功!')
            init
          })
        })
        .catch(() => {
          // on cancel
        })
    }
    // 底部弹出框关闭事件
    function payClose() {
      clearInterval(timer)
    }
    return {
      ...toRefs(homeTypeData),
      backTop,
      isBackTopShow,
      myScroll,
      scroll,
      orderNum,
      orderDetail,
      orderStatus,
      showPay,
      payIsShow,
      aliyun,
      wechat,
      timer,
      payClose,
      handleConfirmOrder
    }
  }
}
</script>

<style lang="scss" scoped>
.order-status {
  padding: 0.16rem;
  border-bottom: 0.2rem solid #eee;
  .order-box {
    height: 0.3rem;
    line-height: 0.3rem;
    .order-text {
      color: gray;
    }
  }
}
.goods-info {
  border-bottom: 0.2rem solid #eee;
  padding: 0.16rem;
  .order-box {
    height: 0.3rem;
    line-height: 0.3rem;
    .order-text {
      color: gray;
    }
  }
}
.my-scroll {
  height: calc(100vh - 0.44rem - 0.44rem);
}
</style>